var EnvCenter = {
    template: `
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading text-center">
                    <h4 class="left">{{logo}}</h4>
                    <div class="btn-group-vertical btn">
                        <div class="text-success" @click="dropdown">
                            <strong class="">{{env.active}}</strong>
                            <span class="caret"></span>
                        </div>
                        <ul class="dropdown-menu" v-show="select">
                            <li v-for="item in env.data" @click="selected(item)">
                                <a href="javascript:;">{{item}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" placeholder="键..." class="form-control"> <br>
                            <textarea type="text" rows="3" placeholder="值..." class="form-control"></textarea>
                            <div class="input-group-addon btn btn-success">{{btnGroup[0]}}</div>
                            <div class="input-group-addon btn btn-primary">{{btnGroup[1]}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
    data: function () {
        return {
            logo: "EnvCenter",
            env: {
                active: "local",
                data: ["local", "dev"]
            },
            select: false,
            btnGroup: ["设值", "获取"],
            url: ""
        }
    },
    methods: {
        dropdown: function () {
            this.select = !this.select;
        },
        selected: function (item) {
            this.env.active = item;
            this.dropdown();
        },
        loadData: function () {
            var _ = this;
            axios.get(_.url)
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }
};

var KeySearch = {
    template: `
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <input class="form-control" v-model="key" placeholder="查询...">
                </div>
                <div class="panel-body table-list">
                    <div class="btn item" 
                    v-for="item in list"
                    @click="selectData(item)" :ref="item">
                        {{item}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
    data: function () {
        return {
            key: "",
            data: ["Through", "the", "cold", "winter",
                "wasteland", "a", "man", "trudged,",
                "leaning", "into", "the", "harsh", "wind",
                "which", "spitefully", "tried", "to",
                "force", "him", "back.", "He", "was",
                "covered", "from", "head", "to", "toe",
                "in", "layers", "of", "thick", "clothing,",
                "layers", "of", "protection", "against",
                "the", "harsh", "environment.", "On", "he",
                "fought,", "searching,", "searching.",
                "He", "was", "working", "so",
                "hard.", "This", "must", "be", "the", "wa"]
        }
    },
    computed: {
        list: function () {
            var _ = this;
            _.clear();
            var list = [];
            for (var i = 0; i < _.data.length; i++) {
                var d = _.data[i];
                if (d.indexOf(_.key) > -1 || "" == _.key) {
                    list.push(d);
                }
            }
            return list;
        }
    },
    methods: {
        selectData: function (ref) {
            var _ = this;
            _.clear();
            _.$refs[ref][0].classList.add("btn-success");
        },
        clear: function () {
            var _ = this;
            for (var item in _.$refs) {
                if (_.$refs[item].length > 0) {
                    _.$refs[item][0].classList.remove("btn-success");
                }
            }
        }
    }
};

var DataShow = {
    template: `
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default ">
                <div class="panel-heading">
                <strong style="cursor: pointer;"># 1</strong>
                　　 {{date}}
                    <div class="input-group">
                        <div class="input-group-addon btn btn-success" @click="refresh">刷新</div>
                        <input class="form-control">
                        <div class="input-group-addon btn btn-danger">×</div>
                    </div>
                </div>
                <div class="panel-body">
                    <pre class="table-data">{{data}}</pre>
                </div>
            </div>
        </div>
    </div>
    `,
    data: function () {
        return {
            date: new Date().format("yyyy-MM-dd hh:mm:ss"),
            data: `{
  "total": 59,
  "size": 100,
  "datas": [
    {
      "magid": "320910010135",
      "recordtitle": "",
      "years": "1987"
    }
    ],
  "page": 1
}`
        }
    },
    methods: {
        refresh: function () {
            this.date = new Date().format("yyyy-MM-dd hh:mm:ss");
        }
    }
};